<template>
  <ViewBase ref="viewBase" class="article" @mouse-up-keyboard="handlerMouseUpKeyboard" @show-prompt="handlerViewBaseShowPrompt" @submit-input="handlerViewBaseSubmitInput">
    <div class="top-bar">
      <div @click="handlerClickBtnPrev" class="btn"><IconArrowLeft /></div>
      <div>{{ idx + 1 }}/{{ lessonCnt.length }}</div>
      <div @click="handlerClickBtnNext" class="btn"><IconArrowRight /></div>
    </div>
    <div class="mn" v-if="lessonCnt.length">
      <div class="c">{{ currentWord.c }}</div>
      <div class="e">
        <div class="e1">{{ te2 }}</div>
        <div class="e2" v-if="flagPrompt">{{ currentWord.e }}</div>
      </div>
      <div class="result" :class="result.text">{{ result.text }}</div>
    </div>
  </ViewBase>
</template>
<script setup lang="ts">
import ViewBase from '../layout/ViewBase.vue'
import { ref, watch, computed } from 'vue'
import { useBaseStore } from '../stores/base.ts'
import IconArrowLeft from '../svg/IconArrowLeft.vue'
import IconArrowRight from '../svg/IconArrowRight.vue'

const baseStore = useBaseStore()
const lessonTitle = ref('')
const lessonCnt = ref([])
const te2 = ref('')
const flagPrompt = ref(false)
const idx = ref(0)
const successCnt = ref(0)
const viewBase = ref()
enum resultState {
  success = 'success',
  fail = 'fail',
}
// const keyboard = ref()

const result = ref({
  text: '',
  flag: false,
})

if (!baseStore.currentLesson) {
  baseStore.menuSwitch = true
}
/**
 * 重置单词
 */
const resetLesson = () => {
  clearCurrentInput() // 清除当前输入状态
  idx.value = 0 // 重置索引
  const temObj = baseStore.currentLesson;
  if (temObj) { // 确保temObj存在
    lessonTitle.value = temObj.title || '';
    lessonCnt.value = temObj.words || [];
  } else {
    lessonTitle.value = '';
    lessonCnt.value = [];
  }
}
/**
 * 监听当前单词库
 */
watch(() => baseStore.currentLesson, resetLesson)
/**
 * 监听状态
 */
watch(() => baseStore.flagComplete, resetLesson)
/**
 * 检查输入内容
 */
const handlerViewBaseSubmitInput = () => {
  // 提交
  if (lessonCnt.value[idx.value][0] === te2.value) {
    result.value.text = resultState.success
    setTimeout(() => {
      result.value.text = ''
      nextWord()
    }, 1500)
  } else {
    result.value.text = resultState.fail
    setTimeout(() => {
      result.value.text = ''
    }, 1500)
  }
}
/**
 * 显示提示
 */
const handlerViewBaseShowPrompt = () => {
  flagPrompt.value = !flagPrompt.value
}
/**
 * 键盘输入事件
 */
const handlerMouseUpKeyboard = (val: string) => {
  te2.value = val
}
/**
 * 清除当前输入
 */
const clearCurrentInput = () => {
  te2.value = ''
  flagPrompt.value = false
  viewBase.value.clearInterValue()
}
/**
 * 前一个
 * 处理点击上一个单词按钮的事件
 * 如果当前索引大于0，则索引减1以查看上一个单词
 */
const handlerClickBtnPrev = () => {
  if (idx.value > 0) {
    idx.value -= 1
  }
}
/**
 * 后一个
 */
const handlerClickBtnNext = () => {
  if (idx.value < currentWord.value.maxIdx) {
    idx.value += 1
  }
}
/**
 * 当前单词
 */
const currentWord = computed(() => {
  return {
    e: lessonCnt.value[idx.value][0],
    c: lessonCnt.value[idx.value][1],
    maxIdx: lessonCnt.value.length - 1,
  }
})
/**
 * 下一个单词
 */
/**
 * 递增成功计数并检查是否完成当前单词的学习。
 * 若已完成当前单词，则标记学习完成状态；否则，进行下一个单词的学习并清空当前输入。
 */
const nextWord = () => {
  // 增加成功计数
  successCnt.value += 1
  if (idx.value === currentWord.value.maxIdx) {
    // 当前单词学习完成的处理
    baseStore.flagComplete = true
  } else {
    // 进入下一个单词的学习
    handlerClickBtnNext()
    // 清空当前的输入
    clearCurrentInput()
  }
}
</script>
<style lang="scss" scoped>
.article {
  .mn {
    flex: 1;
    padding: 0.3508771929824561rem;
    font-size: 0.48596491228070173rem;
    text-align: center;
    position: relative;
    overflow: hidden;

    .e {
      font-family: 'Times New Roman', Times, serif;
    }
  }

  .top-bar {
    display: flex;
    justify-content: space-between;
    padding: 0.1rem;
  }
  .result {
    color: #fff;
    position: absolute;
    height: 0.5rem;
    line-height: 0.5rem;
    width: 100%;
    left: 0;
    bottom: 0px;
    font-size: 0.3059649123rem;
    box-sizing: content-box;
    transform: translateY(100%);

    body.shade & {
      color: #747474;
    }

    &.success {
      transition: all 0.2s linear 0.2s;
      transform: translateY(0);
      background-color: green;

      body.shade & {
        background-color: rgb(0, 36, 0);
      }
    }

    &.fail {
      transition: all 0.2s linear 0.2s;
      transform: translateY(0);
      background-color: red;

      body.shade & {
        background-color: rgb(46, 0, 0);
      }
    }
  }
}
</style>
